<template>
  <div>
    <a-alert
      message="拆分注意事项"
      description="提示内容"
      type="warning"
      show-icon
    />
    <a-divider />
    <a-form-model
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="原业务编号">
        <a-select placeholder="请选择原业务">
          <a-select-option :value="1">YW20220608KQVRHZ-LOGO设计A套餐</a-select-option>
          <a-select-option :value="2">YW20220608KQVRHZ-商标申请</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="原业务当前动态">
        材料待提交
      </a-form-model-item>
      <a-form-model-item label="现官费">
        <a-input type="text" placeholder="请输入现官费" />
      </a-form-model-item>
      <a-form-model-item label="改后官费">
        <a-input type="text" placelholder="请输入改后官费">
          <a-icon slot="addonAfter" type="question-circle" @click="showPrice"/>
        </a-input>
      </a-form-model-item>
      <a-form-model-item label="现代理费">
        <a-input type="text" placeholder="请输入现代理费" />
      </a-form-model-item>
      <a-form-model-item label="改后代理费">
        <a-input type="text" placelholder="请输入改后代理费" />
      </a-form-model-item>
      <a-form-model-item label="调整动态">
        <a-select>
          <a-select-option :value="1">完结</a-select-option>
          <a-select-option :value="2">继续</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="原因阐述">
        <a-textarea :rows="4" placelholder="请输入原因阐述"></a-textarea>
      </a-form-model-item>
      <a-form-model-item label="上传聊天截图">
        <a-upload-dragger
          name="file"
          :multiple="true"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
          <p class="ant-upload-text">
            拖拽要上传的文件至上传区域
          </p>
        </a-upload-dragger>
      </a-form-model-item>
    </a-form-model>
    <a-modal v-model="priceVisible" centered title="业务价格">
      <a-table
        bordered
        size="middle"
        :row-key="(record) => record.id"
        :columns="priceColumns"
        :data-source="priceData"
      >
      </a-table>
    </a-modal>
  </div>
</template>

<script>
  import contractColumns from '@/columns/contract'
  import SelectBusiness from '@/views/contract/components/SelectBusiness'
  import storage from 'store'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import apis from '@/api'

  export default {
    name: 'SplitForm',
    components: { SelectBusiness },
    data () {
      return {
        businessColumns: contractColumns.business2,
        businessData: [],
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
        form: {},
        rules: {},
        headers: { 'Access-Token': storage.get(ACCESS_TOKEN) },
        uploadUrl: apis.Upload,
        accountOpts: {},
        priceVisible: false,
        priceColumns: [
          {
            title: '业务名称',
            dataIndex: 'business_name'
          },
          {
            title: '业务价格',
            dataIndex: 'price'
          }
        ],
        priceData: [
          {
            id: '1',
            business_name: '商标双保【个体】',
            price: '500'
          },
          {
            id: '2',
            business_name: '商标双保【公司】',
            price: '500'
          },
          {
            id: '3',
            business_name: '商标驳回复审双保',
            price: '1010'
          }
        ]
      }
    },
    methods: {
      showPrice () {
        this.priceVisible = true
      }
    }
  }
</script>

<style scoped>

</style>
